<template>
	<view class="template-order">
    
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
		  <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
			<!-- 返回按钮 -->
			<view class="custom-nav__back" @tap.stop="goBack">
			  <view class="tn-icon-left"></view>
			</view>
			<!-- 搜索框 -->
			<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
			  <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark">
				<view class="custom-nav__search__icon tn-icon-search"></view>
				<!-- <view class="custom-nav__search__text">我的圈子</view> -->
				<input type="text" v-model="searchKey" placeholder="我的圈子" confirm-type="search" @confirm="initData()" @input="listenInput">
			  </view>
			</view>
		  </view>
		</tn-nav-bar>
		<view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
		  <!-- 顶部标签 -->
		  <view class="tn-bg-white">
		    <tn-tabs-swiper class="order__tabs" ref="tabs" activeColor="#3165CC" inactiveColor="#080808" :list="list" :current="current" :isScroll="false" @change="tabChange"></tn-tabs-swiper>
		  </view>
		  <view class="scrollView">
		  	<scroll-view class="tn-margin-bottom-lg" scroll-y>
		  		<block v-for="(item, index) in content" :key="index">
		  			<!-- <view class="article-shadow tn-margin" @click="tn('/circlePages/reserve')"> -->
		  			<view class="article-shadow tn-margin" @click="tn('/circlePages/group?id='+item.iid)">
		  				<view class="tn-flex">
		  					<view class="image-pic tn-margin-sm"
		  						:style="'background-image:url(' + item.quntp + ')'">
		  						<view class="image-article" style="border:none;">
		  						</view>
		  					</view>
		  					<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
		  						<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
		  							{{ item.qunbt }}
		  						</view>
		  						<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs"
		  							style="min-height: 105rpx;">
		  							<!-- <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
		              {{ item.desc }}
		            </text> -->
		  							<view class="justify-content-item tn-flex tn-flex-col-center">
		  								<tn-avatar-group :lists="item.viewUser.latestUserAvatar"
		  									size="sm"></tn-avatar-group>
		  							</view>
		  							<view class="justify-content-item tn-flex tn-flex-col-center">
		  								<!-- <text class="tn-color-gray">{{ item.viewUser.viewUserCount }} 人参与</text> -->
		  								<text class="tn-color-gray">{{ item.viewUser.viewUserCount }}</text>
		  							</view>
		  						</view>
		  						<view class="tn-flex tn-flex-col-between">
		  							<view v-for="(label_item,label_index) in item.bqname" :key="label_index" v-if="label_index<=2"
		  								class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
		  								:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
		  								<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
		  							</view>
		  							
		  						</view>
								<view class="tn-flex tn-flex-row-between tn-flex-col-between">
									<view
										class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled"
										style="padding-top: 5rpx;">
										<text class="tn-icon-eye tn-padding-right-xs tn-text-lg"></text>
										<text class="tn-padding-right tn-text-df">{{ item.guanzhucount }}</text>
										<text class="tn-icon-fire tn-padding-right-xs tn-text-lg"></text>
										<text class="tn-text-df">{{ item.liulancount }}</text>
										<text class="tn-icon-fire tn-padding-right-xs tn-text-lg"></text>
										<text class="tn-text-df">{{ item.dianzancount }}</text>
									</view>
									<view @click.stop="tn('/circlePages/build?id='+item.iid)">
										<button type="warn" v-if="current == 0" size="mini">修改</button>
									</view>
								</view>
		  					</view>
		  				</view>
		  			</view>
		  		</block>
		  	</scroll-view>
		  	<view class='tn-tabbar-height'></view>
		  </view>
		</view>
	</view>
</template>

<script>
	import Tools from '@/tools/config.js'
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
    mixins: [template_page_mixin],
	data(){
		return{
			list: [
			  {name: '我创建的',value:1},
			  {name: '我加入的',value:2},
			],
			current:0,
			pages:1,
			searchKey:"",
			content: [
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: ['开源','创意','UI框架'],
				//   desc: '开源可商用组件，助你开发酷炫UI一臂之力',
				//   content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//     ],
				//     viewUserCount: 62
				//   },
				//   collectionCount: 439,
				//   commentCount: 46,
				//   likeCount: 83
				// },
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: ['开源','创意','UI框架'],
				//   desc: '开源可商用组件，助你开发酷炫UI一臂之力',
				//   content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
				//   mainImage:[
				//     'https://resource.tuniaokj.com/images/blogger/content_1.jpeg'
				//   ],
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//     ],
				//     viewUserCount: 12
				//   },
				//   collectionCount: 902,
				//   commentCount: 64,
				//   likeCount: 83
				// },
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: [],
				//   desc: '',
				//   content: '',
				//   mainImage:[
				//     'https://resource.tuniaokj.com/images/shop/computer2.jpg',
				//     'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
				//   ],
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//     ],
				//     viewUserCount: 56
				//   },
				//   collectionCount: 431,
				//   commentCount: 26,
				//   likeCount: 84
				// },
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: ['开源','创意'],
				//   desc: '开源可商用组件',
				//   content: '基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了 基础常用的布局元素，酷炫完善的配色体系，统一可增的图标 icon ，简便调用的功能组件，酷炫的前端页面，吖，编不下去了',
				//   mainImage:[
				//     'https://resource.tuniaokj.com/images/swiper/swiper2.jpg',
				//     'https://resource.tuniaokj.com/images/swiper/swiper3.jpg',
				//     'https://resource.tuniaokj.com/images/swiper/swiper4.jpg',
				//   ],
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//     ],
				//     viewUserCount: 231
				//   },
				//   collectionCount: 780,
				//   commentCount: 89,
				//   likeCount: 82
				// },
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: ['开源','链接'],
				//   desc: 'https://www.yuque.com/tuniao',
				//   mainImage:[
				//     'https://resource.tuniaokj.com/images/shop/watch1.jpg',
				//     'https://resource.tuniaokj.com/images/shop/watch2.jpg',
				//     'https://resource.tuniaokj.com/images/shop/pillow2.jpg',
				//     'https://resource.tuniaokj.com/images/shop/pillow.jpg',
				//   ],
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//     ],
				//     viewUserCount: 28
				//   },
				//   collectionCount: 432,
				//   commentCount: 33,
				//   likeCount: 12
				// },
				// {
				//   userAvatar: 'https://resource.tuniaokj.com/images/blogger/content_1.jpeg',
				//   userName: '图鸟北北',
				//   date: '2022年5月20日',
				//   label: ['开源','创意'],
				//   desc: '开源可商用组件',
				//   mainImage:[
				//     'https://resource.tuniaokj.com/images/blogger/y11.jpg',
				//     'https://resource.tuniaokj.com/images/blogger/y33.jpg',
				//     'https://resource.tuniaokj.com/images/blogger/y22.jpg',
				//     'https://resource.tuniaokj.com/images/blogger/y44.jpg',
				//     'https://resource.tuniaokj.com/images/blogger/y55.jpg',
				//   ],
				//   viewUser: {
				//     latestUserAvatar: [
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'},
				//       {src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'},
				//     ],
				//     viewUserCount: 65
				//   },
				//   collectionCount: 265,
				//   commentCount: 22,
				//   likeCount: 62
				// }
			],
		}
	},
	onShow() {
		this.pages = 1
		this.content = []
		this.initData()
	},
	onReachBottom() {
		this.pages++
		this.initData()
	},
	methods:{
		tn(url){
			uni.navigateTo({
				url: url
			})
		},
		listenInput(e){
			if(e.length == 0){
				this.pages = 1
				this.content = []
				this.initData()
			}
		},
		initData(){
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.request({
				url: Tools.host + '/wshly.ashx',
				method: 'POST',
				data: {
					'lx': 'qun_u_list',
					'openid': theopenid,
					'unionid': theunionid,
					'qunbt':this.searchKey,
					'pageindex':this.pages,
					'pagesize':20,
					'type': this.list[this.current].value
				},
				success: (res) => {
					//成功
					if (res.data.return_code == '1') {
						var thejson = JSON.parse(res.data.data)
						thejson = thejson?.map(i=>{
							console.log(i.qunrstximg)
							const a = i.qunrstximg?.map(j=>{
								return {src: j}
							})
							return {
								...i,
								bqname: i.bqname.split(","),
								viewUser:{
									viewUserCount: i.qunrs,
									latestUserAvatar: a
								}
							}
						})
						console.log(JSON.stringify(thejson))
						this.content = this.content.concat(thejson)
					}
				},
				fail: (res) => {
					console.log('失败' + res)
					uni.showModal({
						title: '失败，请稍后重试',
						showCancel: false
					})
				}
			});
		},
		tabChange(e){
			console.log(e)
			this.current = e
			this.pages = 1
			this.content = []
			this.initData()
		},
	}
}

</script>

<style lang="scss" scoped>

 /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      // margin: auto 5rpx;
      font-size: 40rpx;
      flex-basis: 5%;
      padding: 20rpx 40rpx 20rpx 30rpx;
    }
    
    &__search {
      flex-basis: 55%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 60%;
        padding: 28rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx;
        font-size: 24rpx;
        background-color: #FFFFFF;
        border: 1rpx solid #F8F7F8;
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
        color: #AAAAAA;
      }
    }
  }
  /* 自定义导航栏内容 end */
  .order {
    &--wrap {
      position: fixed;
      left: 0;
      right: 0;
	  bottom:0;
      width: 100%;
      background-color: inherit;
	  .scrollView{
		  position:absolute;
		  top:44px;
		  right:0;
		  left:0;
		  bottom:0;
		  scroll-view{
		  	width:100%;
		  	height:100%;
		  }
	  }
	 
    }
    
    /* 导航栏 start */
    &__tabs {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background-color: inherit;
    }
    /* 导航栏 end */
	
}

.article-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}
.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}
/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

</style>